<template>
  <div>
    <el-form inline class="query-form">
      <el-form-item>
        <TimeRangeButtons defaultType="today" @change="handleTimeRange"></TimeRangeButtons>
      </el-form-item>

      <!-- 内容输入框 -->
      <el-form-item>
        <el-input
            v-model="queryParams.keyword"
            placeholder="请输入内容"
            size="small"
            suffix-icon="el-icon-search"
            style="width: 180px;"
        ></el-input>
      </el-form-item>

      <!-- 自定义时间段选择 -->
      <el-form-item label="自定义时间">
        <el-date-picker
            v-model="queryTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small"
            style="width: 400px;"
            :popper-append-to-body="false"
            popper-class="local-date-picker"
        ></el-date-picker>
      </el-form-item>

      <!-- 查询按钮 -->
      <el-form-item>
        <el-button
            class="screen-btn"
            size="small"
            @click="handleQuery"
        >
          查询
        </el-button>
      </el-form-item>
    </el-form>

    <!-- 查询结果区域 -->
    <div class="result-container">
      <!-- 图表行区域 -->
      <div class="chart-row">
        <!-- 图表1 -->
        <div class="chart-item" style="flex: 3">
          <div>
            <dv-border-box-10>
              <FourStatsChart />
            </dv-border-box-10>
          </div>
          <div style="margin-top: 10px;">
            <dv-border-box-10>
              <CallDirectionPie :callData="{ inCount: 768, outCount: 224 }" />
            </dv-border-box-10>
          </div>
        </div>

        <div class="chart-item" style="flex: 3">

        </div>

        <!-- 图表2 -->
        <div class="chart-item" style="flex: 3">
          <div>
            <dv-border-box-10>
              <OffHookRateChart :data="[99.6, 99.9, 100]" />
            </dv-border-box-10>
          </div>
          <div style="margin-top: 10px;">
            <dv-border-box-10>
              <CallStatusPie :statusData="{ unAnswered: 25, notOnStage: 15, pickedUp: 60 }" />
            </dv-border-box-10>
          </div>
        </div>
      </div>
      <div class="chart-row">
        <div class="chart-item" style="flex: 7">
          <div>
            <dv-border-box-10>
              <PreAcceptTypePie />
            </dv-border-box-10>
          </div>
        </div>
        <div class="chart-item" style="flex: 5">
          <div>
            <dv-border-box-10>
              <MissedCallRateChart :data="[2.84, 2.34, 2.14]" />
            </dv-border-box-10>
          </div>
        </div>
        <div class="chart-item" style="flex: 6">
          <div>
            <dv-border-box-10>
              <MissedCallCountChart :data="[99.6, 99.9, 100]" />
            </dv-border-box-10>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import TimeRangeButtons from '_c/TimeRangeButtons.vue'
import { getTimeRange } from '@/utils/dateUtil'
import FourStatsChart from "@/views/stats/business/CallStats/chart/FourStatsChart/index.vue";
import OffHookRateChart from "@/views/stats/business/CallStats/chart/OffHookRateChart/index.vue";
import CallDirectionPie from "@/views/stats/business/CallStats/chart/CallDirectionPie/index.vue";
import CallStatusPie from "@/views/stats/business/CallStats/chart/CallStatusPie/index.vue";
import PreAcceptTypePie from "@/views/stats/business/CallStats/chart/PreAcceptTypePie/index.vue";
import MissedCallRateChart from "@/views/stats/business/CallStats/chart/MissedCallRateChart/index.vue";
import MissedCallCountChart from "@/views/stats/business/CallStats/chart/MissedCallCountChart/index.vue";

export default {
  components: {
    FourStatsChart,
    OffHookRateChart,
    CallDirectionPie,
    CallStatusPie,
    PreAcceptTypePie,
    MissedCallRateChart,
    MissedCallCountChart,
    TimeRangeButtons
  },
  data() {
    return {
      // 时间范围选择器
      queryTime: null,
      // 查询参数
      queryParams: {
        keyword: '',
        startTime: '',
        endTime: ''
      }
    }
  },
  methods: {
    // 处理时间范围选择
    handleTimeRange(type) {
      const [start, end] = getTimeRange(type)
      this.queryTime = [start, end]
      // 更新查询参数中的时间
      this.queryParams.startTime = start
      this.queryParams.endTime = end
    },

    // 处理查询
    handleQuery() {
      // 处理时间范围
      if (this.queryTime && this.queryTime.length === 2) {
        this.queryParams.startTime = this.queryTime[0].toISOString().split('T')[0]
        this.queryParams.endTime = this.queryTime[1].toISOString().split('T')[0]
      } else {
        this.queryParams.startTime = ''
        this.queryParams.endTime = ''
      }

      // 执行查询逻辑
      console.log('查询参数:', this.queryParams)
      // 这里可以添加实际的查询请求
    }
  },
  mounted() {
    // 默认选中今日
    this.handleTimeRange('today')
  }
}
</script>

<style lang="scss" scoped>

.query-form {
  .el-form-item {
    margin-right: 15px;
    margin-bottom: 5px;
  }

  .el-button {
    margin-right: 8px;
  }
}

// 结果区域外层容器（控制图表和表格的垂直布局）
.result-container {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px; // 图表行与表格之间的间距
}

// 图表行布局
.chart-row {
  padding: 5px;
  display: flex;
  gap: 15px;
}

// 单个图表容器样式
.chart-item {
  flex: 1; // 均分宽度
  padding: 5px;
}

</style>
